<template>
    <div>
        <div class="right-body" v-if="goPay == false">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <li v-for="(item,index) in orderTabList" :key="index" :class="[tabIndex == index ? 'active' : '']" @click="tabIndex = index,typeTab()">
                            <a>{{item}}</a>
                            <div class="after"></div>
                        </li>
                    </ul>
                    <!-- <div class="OMS-ul">
                        <label><input placeholder="请输入搜索昵称"></label>
                        <label><input class="time">-</label>
                        <label><input class="time"></label>
                        <label class="select-container">
                            <span class="select2-selection__rendered">请选择</span>
                            <span class="select2-selection__arrow"></span>
                        </label>

                        <label>
                            <a class="search-bt">搜索</a>
                        </label>
                    </div> -->
                </div>
            </div>

            <!-- OMS begin -->
            <div class="OMS-view-layout">
                <div class="OMS" v-for="(item,index) in orderList" :key="index">
                    <div class="OMS-head">
                        <label>订单编号：{{item.id}}</label>
                        <a class="LX" v-if="tabIndex == 0" @click="QQ = item.seller.qq,copyQQ = !copyQQ">联系陪玩师</a>
                        <a class="LX" v-else @click="QQ = item.buyer.qq,copyQQ = !copyQQ">联系用户</a>
                        <a class="LX zaixian" style="color:#FFB82A;" @click="chatBox = !chatBox,chatCode(item)">在线对话</a>
                        <div class="time">
                            {{$time1(item.createTime)}}
                            <a v-if="item.status == 101 || item.status == 102 || item.status == 10" @click="deleteOrder(item.id)"><i class="delete"></i></a>
                        </div>
                    </div>

                    <div class="OMS-body">
                        <div class="OMS-body-head-img">
                            <img :src="$imgPath(item.seller ? item.seller.headImg : item.buyer.headImg)">
                        </div>
                        <div class="OMS-body-list">
                            <div>
                                <span>昵称  </span>
                                {{item.seller ? item.seller.nickname : item.buyer.nickname}}
                            </div>
                            <div>
                                <span>服务</span>
                                {{item.goods[0].goodsName}}
                            </div>
                            <div>
                                <span>时间</span>
                                {{$time3(item.useStartTime)}}-{{$time4(item.useEndTime)}}（{{item.goods[0].count}}小时）
                            </div>
                        </div>
                        <div class="OMS-body-head-h">
                            {{item.goods[0].goodsObj.price}}/{{item.goods[0].goodsObj.unit}}
                        </div>
                        <div class="OMS-body-head-m" :class="[item.status == 102 ? 'huiseColor' : '']">
                            ￥{{item.orderAmount}}
                            <span class="spanTk" v-if="item.status == 102">已退款￥{{item.orderAmount}}</span>
                        </div>
                        <div class="OMS-body-sta">
                            <p v-if="item.status == 1">{{item.fm}}</p>
                            <p v-if="item.status == 1">等待付款</p>
                            <p v-if="item.status == 2">{{item.fm}}</p>
                            <p v-if="item.status == 2">等待接单</p>
                            <p v-if="item.status == 4">进行中</p>
                            <a v-if="item.status == 3">已接单</a>
                            <a v-if="item.status == 10 && item.comment == 0">已完成</a>
                            <a v-if="item.status == 102 || item.status == 101">已取消</a>
                            <a v-if="item.status == 10 && item.comment == 1">已评价</a>
                        </div>
                        <div class="OMS-body-sta">
                            <p @click="getMessage(item.remark)">查看留言</p>
                        </div>
                        <div class="OMS-body-bt">
                            <a class="bt" v-if="item.status == 1 && tabIndex == 0" @click="goPay=!goPay,zfDetail=item">去支付</a>
                            <a class="qrOrder" v-if="item.status == 10 && item.comment == 1" @click="isPl2 = !isPl2,pingjiaComment = item.comments[0]">查看评价</a>
                            <a class="qrOrder" v-if="item.status == 10 && item.comment == 0 && tabIndex == 0" @click="isPl = !isPl,orderId = item.id,goodsId = item.goods[0].goodsId">评价约玩</a>
                            <a v-if="item.status == 2">已支付</a>
                            <a v-if="(item.status == 4 || item.status == 10) && tabIndex == 0" @click="isTs = !isTs,orderId = item.id" style="line-height:35px;">投诉</a>
                            <a class="bt" v-if="item.status == 2 && tabIndex == 1" @click="accept(item.id)">接单</a>
                            <a class="qrOrder" v-if="item.status == 4 && tabIndex == 0" @click="orderEnd(item.id)">确认订单</a>
                            <a v-else-if="item.status == 102">系统取消</a>
                            <!-- <a class="bt" >去支付</a>
                            <a>取消订单</a> -->
                            <!-- @click="goPay = true" -->
                            <!-- <a class="red" @click="item.jindu = !item.jindu">订单进度</a> -->
                        </div>
                    </div>

                    <div class="OMS-bottom clearfix" v-if="item.jindu">
                        <div class="OMS-bottom-name">
                            订单进度:
                        </div>
                        <div class="OMS-bottom-step clearfix">
                            <ul>
                                <li class="end">
                                    <i class="one"></i>
                                    <label>提交订单</label>
                                    <p>{{$time(item.createTime)}}</p>
                                    <!-- <div class="after"></div> -->
                                </li>
                                <li>
                                    <i class="two"></i>
                                    <label>付款成功</label>
                                    <p></p>
                                    <div class="after"></div>
                                </li>
                                <li>
                                    <i class="three"></i>
                                    <label>陪玩接单</label>
                                    <p></p>
                                    <div class="after"></div>
                                </li>
                                <li >
                                    <i class="four"></i>
                                    <label>订单进行中</label>
                                    <p></p>
                                    <div class="after"></div>
                                </li>
                                <li >
                                    <i class="five"></i>
                                    <label>订单完成</label>
                                    <p></p>
                                    <div class="after"></div>
                                </li>
                                <li >
                                    <i class="six"></i>
                                    <label>评价</label>
                                    <p></p>
                                    <div class="after"></div>
                                </li>

                            </ul>
                            <div class="after">
                                <ul>
                                    <li class="ok"></li>
                                    <li class="ok"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="OMS">
                    <div class="OMS-head">
                        <label>订单编号：100112154498595262651</label>
                        <a class="LX">联系陪玩师</a>
                        <div class="time">
                            2018-09-25
                            <a><i class="delete"></i></a>
                        </div>
                    </div>

                    <div class="OMS-body">
                        <div class="OMS-body-head-img">
                            <img src="../../assets/img/home/recommend-2.jpg">
                        </div>
                        <div class="OMS-body-list">
                            <div>
                                <span>昵称  </span>
                                微凉
                            </div>
                            <div>
                                <span>服务</span>
                                王者荣耀
                            </div>
                            <div>
                                <span>时间</span>
                                2018-09-2510:00-12:00（2小时）
                            </div>
                        </div>
                        <div class="OMS-body-head-h">
                            35.00/小时
                        </div>
                        <div class="OMS-body-head-m">
                            ￥35.00
                        </div>
                        <div class="OMS-body-sta">
                            <p>00:02:40</p>
                            <p>等待付款</p>
                        </div>
                        <div class="OMS-body-bt">
                            <a class="bth">评价约玩</a>
                            <a>投诉</a>
                            <a class="red">订单进度</a>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- 分页 -->
            <div class="page-layout">
                <Page :total="total" show-elevator  @on-change="change" />
            </div>
            <!-- OMS end -->
        </div>
        <centerZf v-if="goPay" :zfDetail="zfDetail" :moneyObj="moneyObj" @listIsGoPay="isGoPay"></centerZf>
        <Modal v-model="copyQQ" width="360">
            <p slot="header" style="color:#333;text-align:center">
                <!-- <Icon type="ios-information-circle"></Icon> -->
            <span>复制QQ</span>
            </p>
            <div style="text-align:center">
                <p>{{QQ}}</p>
            </div>
            <div slot="footer" class="copyQQ-footer">
                <Button type="error" size="large" long @click="copy()">复制</Button>
            </div>
        </Modal>
        <Modal v-model="leaveMessage" :footer-hide="true">
            <div class="message-title">留言</div>
            <textarea class="messageTextarea" id="" cols="30" rows="5" :value="leaveText"></textarea>
        </Modal>
        <Modal v-model="isPl" class="pingjia-title" :footer-hide="true" title="您的评价对我很重要" width="450">
            <Rate show-text v-model="rateValue" size="30" />
            <textarea class="messageTextarea" id="" cols="30" rows="5" placeholder="对这次服务感觉如何？描述一下" v-model="leaveTextPj"></textarea>
            <ul class="pl-biaoqian clearfix">
                <li v-for="(item,index) in commonArr" :key="index" :class="[item.active ? 'commonActive' : '']" @click="commonActive(item)">{{item.name}}</li>
            </ul>
            <div class="gift-button pj-button">
                <span @click="isPl = !isPl">取消</span>
                <span @click="submitEvent()">提交</span>
            </div>
        </Modal>
        <Modal v-model="isPl2" class="pingjia-title" :footer-hide="true" title="评价" width="450">
            <Rate disabled v-model="pingjiaComment.rank" size="30" />
            <textarea class="messageTextarea" id="" cols="30" rows="5" placeholder="对这次服务感觉如何？描述一下" v-model="pingjiaComment.content" disabled></textarea>
            <!-- <ul class="pl-biaoqian clearfix">
                <li v-for="(item,index) in commonArr" :key="index" :class="[item.active ? 'commonActive' : '']" @click="commonActive(item)">{{item.name}}</li>
            </ul> -->
            <!-- <div class="gift-button pj-button">
                <span>取消</span>
                <span @click="submitEvent()">提交</span>
            </div> -->
        </Modal>
        <Modal v-model="isTs" class="pingjia-title tx-box" :footer-hide="true" title="投诉" width="470">
            <div class="ts-one">
                <span>*</span>
                <span>投诉原因</span>
                <Dropdown trigger="click" class="tx-select">
                    <a href="javascript:void(0)">
                        陪玩师转单
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <!-- <DropdownMenu slot="list" @on-click="dropdownMenu()">
                        <DropdownItem name="0">陪玩师转单</DropdownItem>
                        <DropdownItem name="1">涉黄</DropdownItem>
                        <DropdownItem name="2">辱骂</DropdownItem>
                        <DropdownItem></DropdownItem>
                        <DropdownItem>冰糖葫芦</DropdownItem>
                        <DropdownItem>北京烤鸭</DropdownItem>
                    </DropdownMenu> -->
                </Dropdown>
            </div>
            <div class="ts-sm">
                <span>投诉说明</span>
                <textarea class="ts-text" id="" cols="30" rows="10" v-model="tsContent"></textarea>
            </div>
            <div class="ts-pz">
                <span>上传凭证</span>
                <div class="ts-pz-box">
                    <img v-for="(item,index) in imgs" :key="index" :src="$imgPath(item)" alt="">
                    <div class="div-update" style="width: 58px;height:58px;line-height: 58px;" v-if="imgs.length<=3">
                        <Icon type="ios-camera" size="20"></Icon>
                        <input type="file" ref="avatarInput1" class="file-input" @change="complainImg($event)">
                    </div>
                </div>
            </div>
            <div class="gift-button pj-button ts-button">
                <span @click="isTs = !isTs">取消</span>
                <span @click="complain()">提交</span>
            </div>
        </Modal>
        <Modal v-model="chatBox" class="chatOrder" :footer-hide="true" width="700">
            <chat ref="children" :toCode="toCode" :toName="toName" :toUserImg="toUserImg" :toUserId="toUserId" :detailObj="detailObj"></chat>
        </Modal>
    </div>
</template>
<script>
import centerZf from './centerZf'
import chat from '../common/chat'
import apiHttp from '../../api/index'
export default {
    props:['detailObj','moneyObj'],
    data(){
        return{
            copyQQ:false,
            QQ:'',
            orderTabList:['我下的单','我接的单'],
            tabIndex:0,
            goPay:false,
            statusArr:[],     //订单状态 （数据筛选时的参数）
            orderList:[],     // 订单列表
            page:0,           // 页码
            total:0,          // 总数量,
            clearTime:'',      // 销毁时间
            leaveMessage:false,     // 留言框
            leaveText:'',           // 留言内容
            isPl:false,             // 评论框
            isPl2:false,
            rateValue:0,            // 评星
            isTs:false,              // 投诉框
            chatBox:false,          // 聊天框
            toCode:'',              // 聊天人的code
            toName:'',              // 连天人的名字
            toUserImg:'',           // 聊天人的头像
            toUserId:'',            // 聊天人的id
            imgs:[],                // 投诉上传的图片地址
            fileIds:[],             // 投诉上传的图片id
            orderId:'',             // 订单id
            tsContent:'',           // 投诉内容
            commonArr:[],           // 评价的标签
            commonBq:[],            // 评价标签
            goodsId:'',
            leaveTextPj:'',
            pingjiaComment:[],
            commentNum:true,
            zfDetail:{},            // 支付传参
        }
    },
    components:{
        centerZf,
        chat,
    },
    watch:{
        chatBox(newVal,oldVal){
            if(newVal == false){
                this.$refs.children.clearChatList()
            }else{
                setTimeout(()=>{
                    this.$refs.children.listByChat()
                },500)
            }
        },
        isTs(newVal,oldVal){
            if(newVal == false){
                this.imgs = []
                this.fileIds = []
            }
        },
        isPl(newVal,oldVal){
            if(newVal == false){
                this.leaveTextPj = ''
                this.rateValue = 0
                this.commonBq = []
                for(let i = 0; i < this.commonArr.length; i++){
                    this.commonArr[i].active = false
                }
            }
        },
        commonBq(newVal,oldVal){
            if(newVal.length == 3){
                this.commentNum = false
            }else{
                this.commentNum = true
            }
        }
    },
    mounted(){
        this.getOrderBuyList()
        let self = this
        let t = 0
        this.clearTime = setInterval(()=> {
            for(let i = 0; i < self.orderList.length; i++){
                if(self.orderList[i].timeCha > 0){
                    self.orderList[i].timeCha = self.orderList[i].timeCha - 1000
                    self.orderList[i].fm = self.$countDown(self.orderList[i].timeCha)
                }else{
                    self.orderList[i].fm = 0
                }
            }
        }, 1000)
        this.getCommentDesc()
    },
    methods:{
        isGoPay(val){
            this.goPay = val
            this.getOrderBuyList()
        },
        // 我下的单  订单列表
        getOrderBuyList(){
            let params = {
                businessType: 0,
                status: this.statusArr
            }
            apiHttp.orderIndex.indexOrderList(this.page,10,params,resp=>{
                if(resp.code==200){
                    let xtTime = resp.message
                    for(var i=0;i<resp.data.content.length;i++){     
                        resp.data.content[i].jindu = false  
                        if(resp.data.content[i].status == 2 || resp.data.content[i].status == 1){
                            resp.data.content[i].timeCha = resp.data.content[i].payinfos[0].payTime + 600000 - xtTime
                        }else{
                            resp.data.content[i].timeCha = 0
                        }  
                        resp.data.content[i].fm = ''                              
                        if(resp.data.content[i].goods!=null){
                            resp.data.content[i].goods[0].goodsObj = this.$getJson(resp.data.content[i].goods[0].goodsType)
                        }                                                   
                    }              
                    this.orderList = resp.data.content
                    this.total = resp.data.totalElements
                }
            })
        },
        // 我接的单
        getOrderJieList(){   
            let params = {
                businessType:1,
                status:this.statusArr
            }
            apiHttp.orderIndex.indexOrderList(this.page,10,params,resp=>{
                if(resp.code==200){ 
                    let xtTime = resp.message   
                    for(var i=0;i<resp.data.content.length;i++){     
                        resp.data.content[i].jindu = false  
                        if(resp.data.content[i].status == 1){
                            resp.data.content[i].timeCha = resp.data.content[i].createTime + 600000 - xtTime
                        }else if(resp.data.content[i].status == 2){
                            resp.data.content[i].timeCha = resp.data.content[i].payTime + 600000 - xtTime
                        }else{
                            resp.data.content[i].timeCha = ''
                        }  
                        resp.data.content[i].fm = ''                              
                        if(resp.data.content[i].goods!=null){
                            resp.data.content[i].goods[0].goodsObj = this.$getJson(resp.data.content[i].goods[0].goodsType)
                        }                                                   
                    } 
                    this.orderList = resp.data.content
                    this.total = resp.data.totalElements
                }
            })
        },
        // 标签切换
        typeTab(){
            this.orderList = []
            if(this.tabIndex == 0){
                this.getOrderBuyList()
            }else if(this.tabIndex == 1){
                this.getOrderJieList()
            }
        },
        // 接单
        accept(orderId){                          
            apiHttp.orderIndex.acceptOrder(orderId,'',resp=>{
                if(resp.code==200){
                    this.$Message.success('接单成功')
                    this.getOrderJieList()
                }                                                      
            })
        },
        // 确认订单
        orderEnd(orderId){
            let params = {
                orderId:orderId
            }
            apiHttp.apiCenter.orderEnd(params,resp=>{
                if(resp.code == 200){
                    this.getOrderBuyList()
                    this.$Message.success(resp.message)
                }else{
                    this.$Message.error(resp.message)
                }
            })
        },
        // 查看留言
        getMessage(remark){
            if(remark == ''){
                this.$Message.success('留言为空')
            }else{
                this.leaveMessage = !this.leaveMessage
                this.leaveText = remark
            }
        },
        // selct
        dropdownMenu(val){
            console.log(val)
        },
        // 分页
        change(index){
            this.page = index - 1
            if(this.tabIndex == 0){
                this.getOrderBuyList()
            }else if(this.tabIndex == 1){
                this.getOrderJieList()
            }
        },
        //上传投诉图片
        complainImg(event){
            let fd = new FormData()
            fd.append('model','system/complain')
            if (this.$refs.avatarInput1.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.imgs.push(resp.data.url)  
                    this.fileIds.push(resp.data.fileId)          
                    this.$Message.success("上传成功")                               
                }                           
            
            })
        },
        //调用投诉接口
        complain(){       
            let params = {
                orderId:this.orderId,
                content:this.tsContent,
                fileIds:this.fileIds
            }            
            apiHttp.apiCenter.complainOrder(params,resp=>{            
                if(resp.code==200){  
                    this.$Message.success("投诉成功")
                    this.isTs = !this.isTs
                    this.getOrderBuyList()
                }else{
                    this.$Message.warning(resp.message)
                }                                             
            })
        },
        //查询评论标签字典表列表接口
        getCommentDesc(){
            let params = {
                groupCode:'user_tags'
            }            
            apiHttp.apiCenter.commentDesc(params,resp=>{  
                for(let i = 0; i < 8; i++){
                    resp[i].active = false
                    this.commonArr.push(resp[i])
                }                                                                                                                           
            })
        },   
        // 选择评价标签
        commonActive(item){
            if(item.active){
                item.active = false
                for(let j = 0; j < this.commonBq.length; j++){
                    if(this.commonBq[j] == item.id){
                        if(this.commonBq.length > 0){
                            this.commonBq.splice(j,1)
                        }
                    }
                }
            }else{
                if(this.commonBq.length == 3){
                    this.$Message.warning('最多选择三个')
                }else{
                    item.active = true
                    this.commonBq.push(item.id)
                }
            }
        },  
        //评论提交
        submitEvent(){ 
            if(this.rateValue == 0){
                this.$Message.warning('请您给陪玩师打分')
                return
            }else if(this.leaveTextPj == ''){
                this.$Message.warning('请您填写评论')
                return
            }else if(this.commonBq.length == 0){
                this.$Message.warning('请您选择标签')
                return
            }    
            let params = {
               orderId: this.orderId,
               goodsId : this.goodsId,
               rank :this.rateValue,
               content:this.leaveTextPj,
               tags:this.commonBq
            }
            apiHttp.apiCenter.addComment(params,resp=>{             
                if(resp.code==200){  
                    this.$Message.success("评论成功！")
                    this.isPl = !this.isPl
                    this.getOrderBuyList()
                }else{
                    this.$Message.warning(resp.message)
                    this.isPl = !this.isPl
                }
            })
        }, 
        //调用订单删除接口   
        deleteOrder(id){ 
            apiHttp.apiCenter.deleteOrder(id,'',resp=>{ 
                if(resp.code==200){
                    this.$Message.success("订单删除成功")
                    this.getOrderBuyList()
                }else{
                    this.$Message.warning(resp.message)
                }                                                                  
            })
        },  
        // 对话
        chatCode(item){
            if(this.tabIndex == 0){
                this.toCode = item.seller.code
                this.toName = item.seller.nickname
                this.toUserImg = item.seller.headImg
                this.toUserId = item.seller.id
            }else{
                this.toCode = item.buyer.code
                this.toName = item.buyer.nickname
                this.toUserImg = item.buyer.headImg
                this.toUserId = item.buyer.id
            }
        },
        copy(){
            var Url2 = this.QQ
            var oInput = document.createElement("input")
            oInput.value = Url2
            document.body.appendChild(oInput)
            oInput.select() // 选择对象
            document.execCommand("Copy") // 执行浏览器复制命令
            oInput.className = "oInput"
            oInput.style.display = "none"
            this.$Message.success("复制成功")
            this.copyQQ = !this.copyQQ
        }
    },
    destroyed(){
        clearInterval(this.clearTime)
    }
}
</script>
<style scoped>
.OMS-bottom-step ul li i{
    width: 70px !important;
}
.qrOrder{
    border: solid 1px #d84e4d;
    color: #d84e4d;
    display: inline-block;
    padding: 0 25px;
    line-height: 35px;
}
.message-title{
    height: 40px;
    color: #666;
    font-size: 16px;
    line-height: 40px;
    text-align: left;
}
.messageTextarea{
    margin-top: 10px;
    width: 100%;
    background-color: #eee;
    border:#eee solid 1px;
    padding: 3%;
    font-size: 14px;
}
.pl-biaoqian{
    padding: 5px 0 5px 0;
}
.pl-biaoqian li{
    display: inline-block;
    border:solid 1px #eee; 
    padding: 5px 0;
    border-radius: 15px;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
    width: 89px;
}
.pl-biaoqian li:nth-child(1),.pl-biaoqian li:nth-child(5){
    margin-left: 0;
}
.pj-button span{
    width: 130px;
    margin-top: 15px;
}
.ts-one{
    padding: 0 20px;
    height: 40px;
    font-size: 14px;
    text-align: left;
    border-bottom: solid 1px #eee;
}
.ts-one span:nth-child(1){
    color: #d84e4d;
    font-size: 20px;
    padding-right: 5px;
    padding-top: 5px;
}
.ts-one span{
    height: 40px;
    line-height: 40px;
    float: left;
    line-height: 40px;
}
.tx-select{
    float: right;
    height: 40px;
    line-height: 40px;
}
.ts-button{
    margin: 0;
}
.spanTk{
    width: 100%;
    display: block;
    color: #d84e4d;
    font-weight: bold;
}
.huiseColor{
    color: #999;
    font-weight: 400;
}
.ts-pz-box img{
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-right: 10px;
}
.div-update{
    border:dashed 1px #999;
    text-align: center;
    cursor: pointer;
    float: left;
    border-radius: 5px;
    position: relative;
}
.file-input{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    height: 60px;
    width: 60px;
    opacity: 0;
}
.commonActive{
    background-color: #d84e4d;
    color: #fff;
    border-color: #d84e4d;
}
</style>

